<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('后台首页')">
</head>
<!--<script src="webjars/jquery/2.0.0/jquery.min.js"></script>-->
<!--<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">-->
<!--<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>-->


<body>
<div id="workingArea" class="container-fluid">
    <!--导航栏-->
    <div th:replace="include/admin/adminNavigator::html"></div>

    <!--左侧折叠菜单-->
    <div th:include="include/admin/adminLeftMenu::html"></div>

    <div class="col-md-10">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-md-4 control-label">账号：</label>
                <div class="col-md-6">
                    <input name="username" class="form-control"
                           v-model="bean.email"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">密码：</label>
                <div class="col-md-6">
                    <input name="password" class="form-control" v-model="bean.password"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">手机号：</label>
                <div class="col-md-6">
                    <input name="phone" class="form-control" v-model="bean.phone" placeholder="选填"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">姓名：</label>
                <div class="col-md-6">
                    <input name="name" class="form-control" v-model="bean.name" placeholder="选填"
                    />
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">角色：</label>
                <div class="col-md-6">
                    <select name="role" class="form-control" v-model="bean.role">
                        <option>管理员</option>
                        <option>家长</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="form-control  " @click="add">增加</button>
            </div>
        </form>
    </div>

    <div th:replace="include/admin/adminFoot::html"></div>
</div>
</body>

<script>
    $(function () {


        var data4Vue = {
            uri: "user",
            bean: {id: "", email: "", password: "", name: "", phone: "", role: ""}
        };

        var vue = new Vue({
            el: "#workingArea",
            data: data4Vue,
            mounted: function () {

            },
            methods: {
                add: function () {

                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
//                var formdata=new FormData();
//                formdata.append("email",this.bean.email);
//                formdata.append("password",this.bean.password);
//                formdata.append("name",this.bean.name);
//                formdata.append("phone",this.bean.phone);
//                formdata.append("role",this.bean.role);
                    axios.post(this.uri, this.bean).then(function (response) {
                        console.log(response);
                        if (response.data.code == 0)
                            alert("增加成功");
                        else
                            alert(response.data.message);
                    });
                }
            }
        })
    })
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                phone: {
                    validators: {
                        regexp: {
                            /*手机号1开头，第二位34578 然后11位*/
                            regexp: /^1[3|4|5|7|8][0-9]{9}$/,
                            message: '请输入正确的11位手机号码'
                        }
                    }
                },
                name: {
                    validators: {
                        regexp: {
                            /*中文 2-7位*/
                            regexp: /^([\u4e00-\u9fa5]){2,7}$/,
                            message: '请输入正确的姓名'
                        }
                    }

                },
                role: {
                    message: '角色验证失败',
                    validators: {
                        notEmpty: {
                            message: '请选择一个角色类型'
                        },
                        callback: {
//                            message: '必须选择一个文章类型',
                            callback: function (value, validator) {
                                if (value == -1) {
                                    return false;
                                } else {
                                    return true;
                                }

                            }
                        }
                    }
                }
            }
        });
    });
</script>
</html>